<template>
  <div class="head">
    <div class="title">查询条件</div>
    <div class="line" />
    <el-row>
      <el-col :span="24">
        <div class="title1">
          <el-form
            ref="form"
            style="display: flex; margin-top: 24px"
            :model="form"
            label-width="100px"
          >
            <el-form-item class="text" label="文件名称：">
              <el-input v-model="form.sheetName" class="input" />
            </el-form-item>
            <el-form-item class="text" label="状态：">
              <el-select v-model="form.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="Query">查询</el-button>
              <el-button @click="khClear">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="line" style="margin-top: 0px" />

        <div class="title1">
          <div class="title1_1">
            文件列表<span>(只保留最近10天的历史纪录)</span>
          </div>
        </div>
        <elltable :loading="loading" :data="tableData" :th="th">
          <template v-slot:after-columns>
            <el-table-column
              v-if="tableData.length > 0"
              label="操作"
              width="60"
              align="center"
            >
              <template slot-scope="scope">
                <el-button type="text" @click="open(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </template>
        </elltable>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 51px;
          "
        >
          <div class="title2" />
          <div
            class="block"
            style="display: flex; justify-content: flex-end; margin: 0"
          >
            <pagination
              background
              :current-page="form.pageDate.pageNum"
              :page-size="form.pageDate.pageSize"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Download } from '@/api/HqFinancePanel'
import { zbdownload, downloadfile } from '@/api/home'

export default {

  components: {},
  data() {
    return {
      options: [
        {
          value: 0,
          label: '全部'
        }, {
          value: 1,
          label: '下载中'
        }, {
          value: 2,
          label: '已完成'
        }, {
          value: 3,
          label: '失败'
        }],
      loading: false,
      form: {
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        sheetName: '',
        type: ''
      },
      tableData: [],
      total: 0, // 总数
      th: []
    }
  },

  computed: {},

  created() {
  },
  activated() {
    this.Query()
  },
  methods: {
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.Query()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.Query()
    },
    // 查询
    async Query() {
      this.loading = true
      const res = await Download(this.form)
      console.log('查询', res)
      this.loading = false

      if (res.code === 200) {
        this.tableData = res.data.list.data
        this.total = res.data.list.total
        this.th = res.data.fields
      } else {
        this.tableData = []
        this.total = 0
        this.th = []
      }
    },
    // 重置
    khClear() {
      Object.keys(this.form).forEach((key) => {
        if (key !== 'pageDate') {
          this.form[key] = ''
        }
      })
    },
    // 弹出框
    open(row) {
      this.$confirm('是否确定下载?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.type === '下载中') {
          this.$notify.info({
            title: '正在下载...文件有点大哦，请稍后...'
          })
          return
        }
        this.$message({
          type: 'success',
          message: '已经开始下载了'
        })
        this.handleClick(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消下载了'
        })
      })
    },
    // 下载按钮
    async handleClick(row) {
      const res = await downloadfile(row.sheetName)
      // const url = window.URL.createObjectURL(new Blob([res]), { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
      const url = res.data

      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', row.sheetName) // 设置下载的文件名
      document.body.appendChild(link)
      link.click()
      link.parentNode.removeChild(link)
    }

  }
}

</script>
<style
  scoped
  lang="scss"
>
.my-pagination .el-pagination__prev-btn {
  background-color: blue;
  color: red;
}

.head {
  padding: 30px;
}

.title {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}

.line {
  height: 1px;
  background: #d8d8d8;
  border-radius: 1px;
  margin-top: 19px;
}

.title1 {
  // display: flex;
  // justify-content: space-between;
  .title1_1 {
    padding: 30px 0;
    font-size: 20px;
    span {
      font-size: 12px;
      color: red;
    }
  }
  .text {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666666;

    // margin-left: 52px;
    .input {
      width: 286px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px;
    }

    .input1 {
      width: 408px;
      height: 40px;
      background: #ffffff;
      border-radius: 4px;
      margin-left: -70px;
    }
  }
}

.title2 {
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
}
</style>
